<template>
    <el-row>
        <el-row :gutter="24">
            <el-col :span="6">
                <el-card shadow="never" class="col-card">
                    <el-row>今日新用户</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{userNow.user}}</span> 较前一天
                        <span class="col-num-add">
                            <span v-show="userNow.user > user.user">+</span>
                            <span v-if="!user.user">0%</span>
                            <span v-else>{{(((userNow.user - user.user)/user.user)*100).toFixed(2)}}%</span>
                        </span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" class="col-card">
                    <el-row>今日访客数</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{userNow.visitor}}</span> 较前一天
                        <span class="col-num-add">
                            <span v-show="userNow.visitor > user.visitor">+</span>
                            <span v-if="!user.visitor">0%</span>
                            <span v-else>{{(((userNow.visitor - user.visitor)/user.visitor)*100).toFixed(2)}}%</span>
                        </span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" class="col-card">
                    <el-row>总用户</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{userCount}}</span>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="never" class="col-card">
                    <el-row>总访客数</el-row>
                    <el-row class="col-num-wrap">
                        <span class="col-num">{{visitorSum}}</span>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-card shadow="never" style="margin:24px 0;">
            <el-row style="margin-bottom:24px">
                <el-col :span="6">
                    客户分析
                </el-col>
                <el-col :span="18" style="text-align:right">
                    <el-date-picker v-model="timeRange" type="daterange" :picker-options="pickerOptions" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width:240px" @change="changeTime">
                    </el-date-picker>
                </el-col>
            </el-row>
            <IEcharts :option="option" style="height:300px;width:875px"></IEcharts>
        </el-card>
    </el-row>
</template>

<script>
export default {
    layout: "shop",
    data() {
        return {
            user: {
                user: 0,
                visitor: 0
            },
            userNow: {
                user: 0,
                visitor: 0
            },
            userCount: 0,
            visitorSum: 0,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 7
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 30
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(
                                start.getTime() - 3600 * 1000 * 24 * 90
                            );
                            picker.$emit("pick", [start, end]);
                        }
                    }
                ]
            },
            timeRange: [
                new Date(new Date().getTime() - 3600 * 1000 * 24 * 7),
                new Date()
            ],
            option: {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "axis"
                },
                legend: {
                    data: ["新用户", "访客数"]
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: [],
                    axisLabel: {
                        interval: 0,
                        rotate: 50
                    }
                },
                yAxis: {
                    type: "value"
                },
                series: [
                    {
                        name: "新用户",
                        type: "line",
                        smooth: true,
                        data: []
                    },
                    {
                        name: "访客数",
                        type: "line",
                        smooth: true,
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.getData();
        this.getUserChart();
    },
    methods: {
        //用户分析
        async getData() {
            const res = await this.$axios.$get(`/api/app/home/analysis/user`);
            if (res && res.errmsg === "ok") {
                this.userCount = res.data.userCount;
                this.visitorSum = res.data.visitorSum;
                if (res.data.user) {
                    this.user = res.data.user;
                }
                if (res.data.userNow) {
                    this.userNow = res.data.userNow;
                }
            }
        },
        //交易分析折线图
        async getUserChart() {
            const res = await this.$axios.$post(
                `/api/app/home/analysis/userChart`,
                [this.format(this.timeRange[0]), this.format(this.timeRange[1])]
            );
            if (res && res.errmsg === "ok") {
                this.option.xAxis.data = res.data.dates;
                this.option.series[0].data = res.data.dataUser;
                this.option.series[1].data = res.data.datavisitor;
            }
        },
        changeTime(value) {
            if (value) {
                this.timeRange = value;
                this.getUserChart();
            }
        }
    }
};
</script>
<style scoped>
.col-card {
    text-align: center;
    height: 160px;
    padding: 30px 0;
}
.col-num-wrap {
    font-size: 14px;
    margin-top: 10px;
}
.col-num {
    font-size: 20px;
    font-weight: 500;
}
.col-num-add {
    color: #ff4e22;
}
</style>

